<template>
	<view class="page">
		<u-row class="tag2">
			<u-col span="1">
				<u-icon name="search" color="#4D9D28" size="28"></u-icon>
			</u-col>
			<u-col span="11">
				<text class="tag_2">站点检索</text>
			</u-col>
		</u-row>
		<!-- 微信 项目（订单）展示 -->
		<!-- 搜索区域 -->
		<view class="search">
			<uni-easyinput v-model="search.name" placeholder="请输入站点名称" @input="change1" clearable></uni-easyinput>
		</view>

		<scroll-view scroll-y style="height: 200rpx;">
			<view class="content">
				<view class="items" v-for="(item,index) in data" :key="index" @click="click1(item)">
					<text style="font-size:24rpx;">{{item.pname}}-{{item.sname}}-{{item.dir}}</text>
				</view>
			</view>
		</scroll-view>

		<u-row class="tag3">
			<u-col span="1">
				<u-icon name="/static/img/near.png" width="28" height="28"></u-icon>
			</u-col>
			<u-col span="11">
				<text class="tag_3">附近站点</text>
			</u-col>
		</u-row>

		<scroll-view scroll-y style="height: 100rpx;">
			<view class="content">
				<view class="items" v-for="(item,index) in data2" :key="index" @click="click1(item)">
					<text style="font-size:24rpx;">{{item.pname}} {{item.sname}} {{item.dir}}</text>
					<view style="font-size:20rpx;float:right">{{item.juli}}</view>
				</view>
			</view>
		</scroll-view>

		<view class="divider"></view>
		<u-row class="tag4">
			<u-col span="1">
				<u-icon name="error-circle-fill" color="#0E8CAE" size="28"></u-icon>
			</u-col>
			<u-col span="11">
				<text class="tag_4">待处理故障</text>
			</u-col>
		</u-row>

		<!-- 表格 -->
		<view class="table">
			<view>
				<uni-data-checkbox multiple v-model="checkbox1" :localdata="column2" :map="checkboxMap"
					@change="change"></uni-data-checkbox>
			</view>
			<zb-table :show-header="true" :columns="column" :stripe="true" :fit="false" @rowClick="rowClick"
				:border="true" :data="data3"></zb-table>
		</view>
		<u-loadmore :status="status" :loadmoreText="loadmoreText" @loadmore="loadmore" />
		<tabbar :current="1"></tabbar>
	</view>
</template>

<script>
	import {
		getNearSites
	} from '@/api/common.js';
	import {
		getSitesbyName
	} from '@/api/common.js';
	import {
		findAppUndoTaskPage
	} from '@/api/common.js';
	export default {
		data() {
			return {
				status: 'loadmore',
				loadmoreText: '点击加载更多',
				checkbox1: ['id'],
				checkboxMap: {
					text: 'label',
					value: 'name'
				},
				search: {
					name: '',
				}, //查询的参数
				column: [{
						name: 'pname',
						label: '项目',
						fixed: true,
						width: 70,
						type: 'wrap',
						emptyString: '--'
					},
					{
						name: 'sname',
						label: '站点',
						fixed: true,
						width: 104,
						type: 'wrap',
						emptyString: '--'
					},
					{
						name: 'dir',
						label: '位置',
						sorter: false,
						fixed: true,
						width: 50,
						align: 'left',
					},
					{
						name: 'stime',
						label: '故障时间',
						width: 80,
						fixed: true,
						sorter: true,
						type: 'wrap',
					}
				],
				column2: [{
						name: 'sid',
						label: 'ID',
						width: 70,
					},
					{
						name: 'xianxiang',
						label: '故障现象',
						width: 150,
					}
				],
				data: [],
				data2: [],
				data3: [],
				longitude: '',
				latitude: ''
			}
		},
		onLaunch() {
			uni.hideTabBar({})
		},
		onShow() {
			uni.hideTabBar({})
			this.toLocate()
			this.toSearch()
		},
		onLoad() {
			this.toLocate()
			this.toSearch()
		},
		methods: {
			loadmore() {
				console.log('触发加载：' + this.status)
				this.page++;
				this.toSearch()
			},
			//查詢設備列表
			toSearch(e) {
				findAppUndoTaskPage({
					progress: "DC7E2F75-CED9-4316-951C-E12981AB3A19"
				}).then(res => {
					if (res.records.length > 0) {
						res.records.forEach(item => {
							this.data3.push(item)
						})
					}
					if (res.hasNext == false) {
						this.status = 'nomore';
					}

				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: err,
						icon: 'none'
					});
				})
			},
			click1(e) {
				console.log(e)
				uni.navigateTo({
					url: '/pages/fault_treatment/fault_treatment?info=' + JSON.stringify(e)
				})
			},
			getNearSites() {
				getNearSites({
					distance: 1000,
					lat: this.latitude,
					lon: this.longitude
				}).then(res => {
					// console.log('站点信息' + JSON.stringify(res));
					this.data2 = res;
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: err,
						icon: 'none'
					});
				})
			},
			getSitesbyName(e) {
				getSitesbyName({
					name: e
				}).then(res => {
					// console.log('站点信息'+JSON.stringify(res));
					this.data = res;
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: err,
						icon: 'none'
					});
				})
			},
			toLocate() {
				console.log('准备定位：');
				var that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.latitude = res.latitude
						that.longitude = res.longitude
						that.getNearSites()
					},
					fail() {
						console.log('定位失敗')
					}
				});
				// that.latitude = 36.203377
				// that.longitude = 117.65548
				// that.getNearSites()
			},
			change(e) {
				console.log('e:', e);
				this.column = [{
						name: 'pname',
						label: '项目',
						fixed: true,
						width: 70,
						type: 'wrap',
						emptyString: '--'
					}, {
						name: 'sname',
						label: '站点',
						fixed: true,
						width: 104,
						type: 'wrap',
						emptyString: '--'
					},
					{
						name: 'dir',
						label: '位置',
						sorter: false,
						fixed: true,
						width: 50,
						align: 'right',
					},
					{
						name: 'stime',
						label: '故障时间',
						fixed: true,
						width: 80,
						sorter: true,
						type: 'wrap',
					}
				]
				this.column = this.column.concat(e.detail.data)
				// console.log(this.column)
			},

			change1(e) {
				console.log("站名：" + e + "--" + this.search.name)
				// this.search.name = e
				this.getSitesbyName(e)

			},
			rowClick(row, index) {
				console.log('選中：' + JSON.stringify(row) + "--" + index)
				var info = {
					sname: row.sname,
					dir: row.dir,
					id: row.siteid
				}
				var url = ""
				// if (row.id != null) {
				// 	url = '/pages/fault_treatment/fault_treatment_add?id=' + row.id + '&info=' + JSON.stringify(
				// 		info) + '&op=2'
				// } else {
				// 	url = '/pages/fault_treatment/fault_treatment_add?xianxiang=' + row.xianxiang +
				// 		'&submitBy=' + row.submitBy + '&info=' + JSON.stringify(info) + '&op=2'
				// }
					url = '/pages/fault_treatment/fault_treatment_add?taskid=' + row.id + '&info=' + JSON.stringify(
						info) + '&op=2'
				uni.navigateTo({
					// url: '/pages/fault_treatment/fault_treatment_add?data=' + JSON.stringify(row)	+'&info=' + JSON.stringify(info)+'&op=2'
					url: url
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		margin-left: 12rpx;

		.items {
			margin-bottom: 4rpx;
			height: 40rpx;
		}
	}


	.divider {
		// margin-bottom: 0%;
		height: 1px;
		margin-top: 20rpx;
		background-color: #0E8CAE;
	}


	$color_1: #4D9D28;
	$color_2: #61A9ED;
	$color_3: #0E8CAE;

	.tag2 {
		height: 56rpx;
		margin-top: 12rpx;
	}

	.tag_2 {
		font-size: 36rpx;
		color: $color_1;
	}

	.tag3 {
		height: 56rpx;
		padding-top: 12rpx;
	}

	.tag_3 {
		font-size: 36rpx;
		color: $color_2;
	}

	.tag4 {
		height: 56rpx;
		margin-top: 48rpx;
	}

	.tag_4 {
		font-size: 36rpx;
		color: $color_3;
	}

	.search {
		@include flex(space-between, flex-start);
		margin-top: 16rpx;
		height: 80rpx;

		.ss {
			width: 36vw;
		}
	}

	.row {
		margin-top: 20rpx;
	}

	.table {
		margin-top: 20rpx;
	}
</style>